// ////////////////////////////////////////////////////////////////////////////////
// // 1. 支持 CommonJS 的 require 函数
// ////////////////////////////////////////////////////////////////////////////////

// const createHeading = require('./heading.js').default
// const better = require('./better.png')
// require('./main.css')

// const heading = createHeading()
// const img = new Image()
// img.src = better
// document.body.append(heading)
// document.body.append(img)

// ////////////////////////////////////////////////////////////////////////////////
// // 2. 支持 ES Modules 的 import 声明
// ////////////////////////////////////////////////////////////////////////////////

import createHeading from "./heading.js";
import icon from "./icon.png";

import aboutMd from "./about.md";
import footerHtml from "./footer.html";
import "./main.css";

const heading = createHeading();
const img = new Image();
img.src = icon;
document.body.append(heading);
document.body.append(img);

const foot = document.createElement("div");
foot.innerHTML = footerHtml;

const about  = document.createElement('div')
about.innerHTML = aboutMd

document.body.append(foot);
document.body.append(about);

// ======================== fetch proxy api example ========================

const ul = document.createElement('ul')
document.body.append(ul)

// 跨域请求，虽然 GitHub 支持 CORS，但是不是每个服务端都应该支持。
// fetch('https://api.github.com/users')
fetch('/api/users') // http://localhost:9000/api/users
  .then(res => res.json())
  .then(data => {
    data.forEach(item => {
      const li = document.createElement('li')
      li.textContent = item.login
      ul.append(li)
    })
  })
